<!-- 
    标签页
 -->
<template>
    <div class="header-tags">
        <div class="scroll-tag">
            <!-- 标签页滚动条 -->
            <el-scrollbar>
                <div class="scrollbar-flex-content">
                    <template v-for="(tag,index) in dynamicTags" :key="tag.fullPath">
                        <!-- 右击弹出菜单栏 -->
                        <el-dropdown trigger="contextmenu" @command="dropdownCommand" @contextmenu.native="contextmenu">
                            <!-- 标签 -->
                            <el-tag :closable="tag.fullPath !== '/index/dashboard'" :disable-transitions="false"
                                @close="handleClose(index)" @click="routePath(tag.fullPath)"
                                :class="{tag_bg:route.fullPath===tag.fullPath?true:false}" type="info">
                                <!-- 小图标 -->
                                <el-icon v-if="route.fullPath===tag.fullPath" style="vertical-align: -2px;">
                                    <LocationFilled />
                                </el-icon>
                                <span>{{ $t(tag.meta.title) }}</span>
                            </el-tag> 
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item :command="{code:1,fullPath:tag.fullPath}" :icon="RefreshRight">
                                        刷新
                                    </el-dropdown-item>
                                    <el-dropdown-item :command="{code:2,fullPath:tag.fullPath}" :icon="Close"
                                        :disabled="index == dynamicTags.length-1 || dynamicTags.length == 1">
                                        删除右侧标签
                                    </el-dropdown-item>
                                    <el-dropdown-item :command="{code:3,fullPath:tag.fullPath}" :icon="CircleClose"
                                        :disabled="dynamicTags.length == 1">
                                        删除所有
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </template>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup lang="ts">
import { LocationFilled, RefreshRight, CircleClose, Close } from '@element-plus/icons-vue'
import { reactive,watch } from 'vue';
import { useRoute, useRouter } from "vue-router"
const router = useRouter()
const route = useRoute()

// 监听路由变化，来获取数据，进行传参
watch(route, (route) => {
    addTab(route)
})

// 渲染标签数据
const dynamicTags = reactive([{ fullPath: "/index/dashboard", meta: { title: 'home' } }])

// 添加标签
const addTab = (route: any) => {
    if (route.name == "redirect") {
        return
    }

    let TagData = dynamicTags
    // 去重
    // find 如果有重复的值那么会返回该数据
    let i = TagData.findIndex((item) => item.fullPath == route.fullPath)
    if (-1 == i) {
        let data = {
            fullPath: route.fullPath,
            meta: route.matched.slice(-1)[0].meta
        }
        dynamicTags.push(data)
    }
}
// 跳转页面
const routePath = (path: string) => {
    if (path != route.fullPath) {
        router.replace(path)
    }
}

// 删除标签页
const handleClose = (index: number) => {
    let TagData = dynamicTags
    let tag = TagData[index]
    // 当前选中被删除后，优先选中当前选中的后面，没有后面那么就选中前面
    if (route.fullPath == tag.fullPath) {
        let { fullPath } = TagData[index + 1] || TagData[index - 1];
        // 获取选中的路由路径，推送到路由中进行跳转
        router.push(fullPath)
    }
    // 进行删除操作
    dynamicTags.splice(index, 1)
}

// 可以高亮当前选中的标签
addTab(route)

// 右击事件模拟body点击事件，这样不会出现重复出现下拉菜单栏
const contextmenu = () => {
    document.body.click()
}

// 右击弹出下拉菜单栏
const dropdownCommand = ({ code, fullPath }: { code: number, fullPath: string }) => {
    let open_tag = dynamicTags
    switch (code) {
        case 1: // 刷新页面
            let tag = open_tag.find(item => item.fullPath == fullPath)
            // 跳转路由并且进行传参，把当前右击的路由路径传递过去
            router.replace({ path: '/index/redirect/' + tag?.fullPath })
            break;
        case 2: // 关闭右边所有标签
            // 检索当前高亮，有返回其下标，没有返回-1
            let index = open_tag.findIndex(item => item.fullPath == fullPath)
            // 获取高亮的位置的下标
            let activeIndex = open_tag.findIndex(item => item.fullPath == route.fullPath)
            // 删除右边所有标签
            open_tag.splice(index + 1)
            // 当前页面被关闭时，显示被右键的标签
            if (activeIndex > index) {
                // 跳转到被右键的标签
                router.push(dynamicTags[index].fullPath)
            }
            break;
        case 3: // 关闭所有标签
            // 删除1下标后面所有的标签，包括1下标
            open_tag.splice(1)
            // 跳转到首页
            router.push({ name: "Dashboard" })
            break;
        default:
            break;
    }
}

</script>

<style scoped lang="less">
.header-tags {
    
    // 标签页容器样式
    .scroll-tag {
        height: 40px;
        padding: 0px 20px;
        border-top: 1px solid #b7b9c0;
        border-bottom: 1px solid #b7b9c0;
        box-shadow: 0px 8px 6px -6px #ccc;
        // 标签水平居中
        &::v-deep .el-scrollbar__wrap {
            display: flex;
            align-items: center;
        }

        // 标签页滚动条
        .scrollbar-flex-content {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center; // 垂直居中

            .el-dropdown {

                // 标签样式
                .el-tag {
                    margin-right: 10px;
                    background-color: white;
                    height: 30px;
                    line-height: 30px;
                    color: black;
                    border: #D3D4D6 1px solid;
                    border-radius: 0;
                    cursor: pointer;

                    // 隐藏未选中的删除按钮，只有悬停才会出现
                    &::v-deep .el-tag__close {
                        color: #e7e9eb;
                    }

                    // 下拉菜单栏
                    .el-dropdown {

                        // 下拉菜单栏的文字样式
                        .el-dropdown-link {
                            height: 30px;
                            line-height: 30px;
                        }
                    }
                }
            }

            // 点击tag添加背景颜色
            &::v-deep .tag_bg {
                background-color: #409EFF !important;
                color: white !important;
                border: none;
            }
        }
    }
}
</style>